<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>顶部登录注册栏</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/header.css">
    <link rel="stylesheet" href="css/comm.css">
    <link rel="stylesheet" href="iconfont/iconfont.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</head>
<body> 
    <!-- 滚轮显示 -->
<div class="lg-bg" id="lgShow"></div>

    <!-- 大屏显示 -->
<div class="wf-bg">
    <div class="w-9 wf-table">
        <div class="wf-float-left">本模板支持简洁的在线销售视频功能，5分钟即可开始在线销售视频</div>
        <div class="wf-float-right">
            <div class="wf-btn my-p">
                <a href="register.html"><i class="iconfont icon-denglu"></i>注册</a>
            </div>
            <div class="wf-btn">
                <a href="login.html"><i class="iconfont icon-denglu1"></i>登录</a>
            </div>
        </div>
    </div>
</div>
<div class="wf-wrap w-9">
    <div class="wf-logo">
        <div class="wf-logo-img"><a href=""><img src="img/logo.png" alt=""></a></div>
    </div>
    <div class="wf-input">
        <input type="text" placeholder="输入关键字">
        <div class="search-btn">搜索</div>
    </div>
</div>
<div class="nav-holder">
    <div class="nav-taps w-9">
        <div class="nav-item"><a href="index.html">首页</a></div>
        <div class="nav-item"><a href="course.html">课程分类</a></div>
        <div class="nav-item"><a href="about.html">关于我们</a></div>
        <div class="nav-item"><a href="login.html">登录/注册</a></div>
        <div class="nav-item"><a href="explain.html">模板使用说明</a></div>
    </div>
</div>
</div>


<!--小屏顶部导航栏-->
<div class="menu-bg" id="bg" onclick="menubtn()"></div>
<div class="moblie-menu">
    <!--左边小图标-->
    <div class="moblie-login-menu">
        <div class="login-menu-icon" onclick="login()" >
            <div class="icon"></div>
            <div class="icon"></div>
            <div class="icon"></div>
            <div class="icon"></div>
        </div>
    </div>
    <!--中间logo图片-->
    <div class="moblie-middle">
        <a href="#"><img src="img/logo.png" alt=""></a>
    </div>
    <!--右边登录注册图标-->
    <div class="moblie-right">
        <a href="shopping.html"><i class="right-icon iconfont icon-gouwuchekong"></i></a>
        <a href="login.html"><i class="right-icon iconfont icon-denglu2"></i></a>
        <a href=""><i class="right-icon iconfont icon-sousuo"></i></a>
    </div>
</div>
<!--按钮显示菜单-->
<div class="dl-menu " id="dl">
    <div class="">
        <div class="dl-login-btn"><a href="login.html">登录</a></div>
        <div class="dl-register-btn"><a href="register.html">注册</a></div>
    </div>
    <div class="dl-none"></div>
    <span class="menu-item"><a  href="index.html">首页</a></span>
    <span class="menu-item"><a  href="course.html">课程分类</a></span>
    <span class="menu-item"><a  href="about.html">关于我们</a></span>
    <span class="menu-item"><a  href="login.html">登录/注册</a></span>
    <span class="menu-item"><a  href="explain.html">模板使用说明</a></span>
</div>

</body>
<script>
    //右侧菜单点击显示隐藏效果
    var menu = document.getElementById('dl');
    var menuBg = document.getElementById('bg');
    // 显示效果
    function login(){
        menu.style.left = 0;
        menuBg.style.display = 'block'
    }
    //隐藏效果
    function menubtn(){
        menu.style.left = '-260px';
        menuBg.style.display = 'none'
    }
    //鼠标滚动效果
    function getTop(){
        var top = $(document).scrollTop();
        if($(document).scrollTop() > 150){//当滚动距离大于100px时
            $("#lgShow").css({
                'display':'block',
                'top':0,
            });
        } else {
            $("#lgShow").css('display','none');
        }
        setTimeout(getTop);
    } getTop();
     
   
</script>
</html>